<template>
  <div>
    <div v-text="msg"></div>
    <button @click="changeMsg">点击我</button>
  </div>
</template>


<script lang="ts">
// 需要指定语言类型为 typescript

// 因为 vue.config.js 中  configureWebpack 配置了不需要指定 ts 的扩展名，所以这里不需要添加 .ts 后缀
import {add} from "./demo";
import vue from "vue";

// 必须使用 vue.extend() 或者 vue.component 来定义一个组件
export default vue.extend({
  name: "counter",
  data() {
    return {
      msgTemplate:"你好" ,
      msg: '点击之后就会变了',
      count: 0,
    }
  },
  methods: {
    addOne(a: number): number {
      // add(a, "")
      return add(a, 1)
    },
    changeMsg():void {
      this.count = this.addOne(this.count)
      this.msg = this.msgTemplate + " " as string+ this.count
    }
  }
})
</script>

<style scoped>

</style>
